<template>
    <pageTabelLayout>
        <template #pageHeader>
        <div class="search-form isheader" v-show="headerShow" style="height: 60px;">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="入库单号" v-if="activeNme != '2'" prop="stockInCode">
                    <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.stockInCode" />
                </a-form-item>

                <a-form-item label="客户名称" prop="customName">
                    <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.customName" />
                </a-form-item>

                <a-form-item label="织布单号" prop="planOrderCode">
                    <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.planOrderCode" />
                </a-form-item>

                <a-form-item label="坯布单号" v-if="activeNme != '2'" prop="greyCode">
                    <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.greyCode" />
                </a-form-item>

                <a-form-item label="日期" v-if="activeNme != '2'" prop="beginDate">
                    <!-- <el-date-picker
              type="date"
              placeholder="选择开始日期"
              v-model="query.beginDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            /> -->
                    <a-date-picker  popup-container="html"  v-model="query.beginDate" :style="{ width: '230px' }" placeholder="选择开始日期"
                        class="bacClass" />
                </a-form-item>

                <a-form-item label="至" v-if="activeNme != '2'" prop="endDate">
                    <!-- <el-date-picker
              type="date"
              placeholder="选择结束日期"
              v-model="query.endDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            /> -->
                    <a-date-picker  popup-container="html"  v-model="query.endDate" :style="{ width: '240px' }" placeholder="选择开始日期"
                        class="bacClass" />
                </a-form-item>

                <CorporateSectorCascader v-if="activeNme != '2'" :configCascader="configCascader2"
                    @changeCascader="changeCascader2" />

                <a-form-item label="仓库" v-if="activeNme != '2'">
                    <a-select popup-container="html"  class="bacClass" :style="{ width: '225px' }" v-model="query.warehouseName"
                        :disabled="query.companyName == ''" allow-clear>
                        <a-option v-for="item in pageData.inShelveList2" :key="item.id" :value="item.warehouseName">
                            {{ item.warehouseName }}
                        </a-option>
                    </a-select>
                    <!-- <el-select
              v-model="query.warehouseName"
              @focus="focusShelve2"
              filterable
              placeholder="选择仓库"
              :disabled="query.companyName"
            >
              <el-option
                v-for="item in pageData.inShelveList"
                :key="item.id"
                :label="item.warehouseName"
                :value="item"
                :loading="pageData.loading"
              />
            </el-select> -->
                </a-form-item>
            </a-form>
        </div>
        <div class="my-tool-bar" style="margin-bottom: 5px">
            <a-space>
                <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                <el-button v-if="activeNme == '2'" @click="splitAdjustment()">入库</el-button>
                <el-button v-if="activeNme == '1'" @click="audit()" :icon="EditPen">审核</el-button>
            </a-space>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>
    </template>
        <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
        <template #pageTabel>
            <a-tabs   :lazy-load="true"  @change="activeChange" justify :default-active-key="activeNme">
                <a-tab-pane title="待处理" key="2">
                    <div style="width: 100%; height: 100%">
                        <encapsulation-agrid ref="refgridOption1" :configaggrid="configaggrid1"></encapsulation-agrid>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="未审核" key="1">
                    <div style="width: 100%; height: 100%">
                        <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="已审核" key="3">
                    <div style="width: 100%; height: 100%">
                        <encapsulation-agrid ref="refgridOption2" :configaggrid="configaggrid2"></encapsulation-agrid>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </template>
        <el-dialog style="width: 500px" v-model="pageData.dialogFormVisible" v-loading="loadingElplus">
            <el-form :model="form">
                <el-form-item label="入库类型" prop="stockInType" label-width="80px">
                    <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="form.stockInType"
                        style="width: 200px" disabled />
                </el-form-item>
                <el-form-item label="仓库:" label-width="80px">
                    <el-select v-model="form.warehouseId" @focus="focusShelve" filterable placeholder="选择仓库">
                        <el-option v-for="item in pageData.inShelveList" :key="item.id" :label="item.warehouseName"
                            :value="item.id" :loading="pageData.loading" />
                    </el-select>
                </el-form-item>
                <el-form-item label="布笼:" label-width="80px">
                    <el-select v-model="form.shelveId" @focus="focusShelve1" filterable placeholder="选择布笼"
                        :disabled="!form.warehouseId">
                        <el-option v-for="item in pageData.inShelveList1" :key="item.id" :label="item.shelveName"
                            :value="item.id" :loading="pageData.loading" />
                    </el-select>
                </el-form-item>
                <!-- <el-select
                v-model="form.inShelveId"
                @focus="focusShelve"
                filterable
                placeholder="选择调整布笼"
              >
                <el-option
                  v-for="item in pageData.inShelveList"
                  :key="item.id"
                  :label="item.shelveName"
                  :value="item.id"
                  :loading="pageData.loading"
                />
              </el-select> -->

                <!-- <el-form-item label="入库类型:" label-width="80px">
              <el-select
                v-model="form.stockInType"
                @focus="focusShelve3"
                filterable
                placeholder="选择入库类型"
                :disabled="!form.warehouseId"
              >
                <el-option
                  v-for="item in pageData.inShelveList3"
                  :key="item.id"
                  :label="item.shelveName"
                  :value="item.id"
                  :loading="pageData.loading"
                />
              </el-select>
            </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="save"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <a-drawer cancel-text="关闭" popup-container=".arco-tabs-content" height="80vh" placement="bottom"
            :visible="pageData.showAdd" unmountOnClose @cancel="pageData.showAdd = false" :mask-closable="false">
            <template #title> 详情 </template>
            <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="refgridOption2" :configaggrid="configaggrid2"></encapsulation-agrid>
            </div>
        </a-drawer>
    </pageTabelLayout>
</template>
  
<script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
import { tableColumns, tableColumns1, tableColumns2 } from './index'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { Search, EditPen } from '@element-plus/icons-vue'
interface Pagein {
    btnList: any
    dataList: any
    dialogFormVisible: boolean
    pageType: string
    showAdd: boolean
    loading: boolean
    inShelveList: any
    inShelveList1: any
    inShelveList2: any
    inShelveList3: any
}
const headerShow = ref(true)


// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
    btnList: ['查询', '导出'], // 按钮列表
    dataList: [],
    dialogFormVisible: false,
    pageType: '',
    showAdd: false,
    loading: false,
    inShelveList: [],
    inShelveList1: [],
    inShelveList2: [],
    inShelveList3: [],
})

interface Querin {
    planOrderCode: Number | String
    customOrderNo: Number | String
    greyCode: Number | String
    customName: Number | String
    stockInCode: Number | String
    endDate: string
    beginDate: string
    warehouseName: string
    companyName: string
    companyId: Number | String
    stockInTypeId: Number | String
    stockInType: Number | String
    auditState: Number | String
    stockOutTypeId: Number | String
}
const form = ref<any>({})
//getlist初始化接口参数
let query = reactive<Querin>({
    customName: '',
    planOrderCode: '',
    customOrderNo: '',
    greyCode: '',
    stockInCode: '',
    endDate: '',
    beginDate: '',
    warehouseName: '',
    companyName: '',
    companyId: '',
    stockInTypeId: 22,
    stockInType: '染厂退料入库',
    auditState: '1',
    stockOutTypeId: 22,
})
//tabs选中的值
let activeNme = ref<string>('2')
// loding.....
let loadingElplus = ref<boolean>(false)

const activeChange = (val: any) => {
    query.customName = ''
    query.planOrderCode = ''
    query.customOrderNo = ''
    query.greyCode = ''
    query.stockInCode = ''
    query.endDate = ''
    query.beginDate = ''
    query.companyName = ''
    query.warehouseName = ''
    query.companyId = ''
    activeNme.value = val
    getList()
}
const changeCascader2 = (data: any) => {
    const { corporateId, corporateLabel } = data
    query.companyName = corporateLabel
    query.companyId = corporateId
    focusShelve2()
}
const configCascader2 = ref<{}>({
    corporateWidth: '230px', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
})
const selsetionList = ref<any>([])
const splitAdjustment = () => {
    let selsetionList1 = refgridOption1.value.getSelectedRows()
    if (selsetionList1.length == 0) {
        ElMessage.warning('请选择您的单据')
        return
    }
    let condition = selsetionList1.every(
        (item: any) => item.customName === selsetionList1[0].customName
    )
    if (!condition) {
        ElMessage.warning('请选择客户名称相同的单据')
        return
    }
    form.value.companyId = ''
    form.value.warehouseId = ''
    form.value.shelveId = ''
    form.value.stockInType = '染厂退料入库'
    form.value.stockInTypeId = 22
    //   form.value = selsetionList[0]
    selsetionList.value = selsetionList1
    pageData.dialogFormVisible = true
}
let refgridOption = ref<any>()
let refgridOption1 = ref<any>()
let refgridOption2 = ref<any>()
// 未审核
let configaggrid = ref({
    url: '/wms/GreyStockIn/getPage', //接口路径
    queryData: {
        //接口参数
        customName: query.customName,
        planOrderCode: query.planOrderCode,
        customOrderNo: query.customOrderNo,
        greyCode: query.greyCode,
        stockInCode: query.stockInCode,
        beginDate: query.beginDate,
        endDate: query.endDate,
        stockInTypeId: 22,
        stockInType: '染厂退料入库',
        auditState: 0,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
    fileName:'BlankStockReturnDemo-1'
})
// 未处理
let configaggrid1 = ref({
    url: '/wms/GreyStockIn/getBlankReturnDataLink', //接口路径
    queryData: {
        //接口参数
        customName: query.customName,
        planOrderCode: query.planOrderCode,
        stockOutTypeId: 22,
        stockInType: '染厂退料入库',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    //   checkboxShow: true,
    column: tableColumns1,
    fileName:'BlankStockReturnDemo-2'
})
// 已审核
let configaggrid2 = ref({
    url: '/wms/GreyStockIn/getPage', //接口路径
    queryData: {
        //接口参数
        customName: query.customName,
        planOrderCode: query.planOrderCode,
        customOrderNo: query.customOrderNo,
        greyCode: query.greyCode,
        stockInCode: query.stockInCode,
        beginDate: query.beginDate,
        endDate: query.endDate,
        stockInTypeId: 22,
        stockInType: '染厂退料入库',
        auditState: 1,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: false, //点击行是否多选
    column: tableColumns2,
    fileName:'BlankStockReturnDemo-3'
})
const save = async () => {
    if (!form.value.warehouseId) {
        ElMessage.error('请选择您的仓库')
        return
    }
    if (!form.value.shelveId) {
        ElMessage.error('请选择您的布笼')
        return
    }
    let parData = selsetionList.value.reduce((pre: any, cur: any) => {
        return pre.concat({
            companyId: cur.companyId,
            warehouseId: form.value.warehouseId,
            shelveId: form.value.shelveId,
            stockInType: form.value.stockInType,
            stockInTypeId: 22,
            areaId: cur.areaId,
            clothfiyId: cur.clothfiyId,
            greyCode: cur.greyCode,
            greyName: cur.greyName,
            greyBatchNo: cur.greyBatchNo,
            planOrderCode: cur.planOrderCode,
            clothfiyCode: cur.clothfiyCode,
            weight: cur.weight,
            horseNo: cur.horseNo,
            machineGreyCode: cur.machineGreyCode,
            machineCode: cur.machineCode,
            parentId: cur.parentId,
            circulatCard: cur.circulatCard,
            clothCode: cur.clothCode,
            yarnBatch: cur.yarnBatch
        })
    }, [])

    try {
        loadingElplus.value = true
        let { code, message } = await post({
            url: 'wms/GreyStockIn/insertList',
            data: parData,
        })
        if (code == 200) {
            loadingElplus.value = false
            getList()
            pageData.dialogFormVisible = false
            ElMessage.success('入库成功')
            return
        }
        ElMessage.error(message)
    } finally {
        loadingElplus.value = false
    }
}
const audit = async () => {
    let selsetionList = refgridOption.value.getSelectedRows()
    if (selsetionList.length == 0) {
        ElMessage.warning('请选择您的单据')
        return
    }
    ElMessageBox.confirm('确认通过审核吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info',
    })
        .then(async () => {
            let parData = selsetionList.reduce((pre: any, cur: any) => {
                return pre.concat(cur.id)
            }, [])
            try {
                loadingElplus.value = true
                let { code, message } = await post({
                    url: 'wms/GreyStockIn/setAudit',
                    data: { ids: parData, auditState: 1 },
                })
                if (code == 200) {
                    loadingElplus.value = false
                    ElMessage.success('审核成功')
                    getList()
                    return
                }
                ElMessage.error(message)
            } finally {
                loadingElplus.value = false
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
const focusShelve = async () => {
    try {
        pageData.loading = true
        let { code, data, message } = await post({
            url: 'wms/warehouse/getWarehouseByPara ',
            data:{virtuallyState:0}
        })
        if (code == 200) {
            pageData.inShelveList = data
            pageData.loading = false
            return
        }
        ElMessage.error(message)
    } finally {
        pageData.loading = false
    }
}

const focusShelve2 = async () => {
    try {
        pageData.loading = true
        let { code, data, message } = await post({
            url: 'wms/warehouse/getWarehouseByPara',
            data:{virtuallyState:0}
        })
        if (code == 200) {
            pageData.inShelveList2 = data
            pageData.loading = false
            return
        }
        ElMessage.error(message)
    } finally {
        pageData.loading = false
    }
}
const focusShelve1 = async () => {
    try {
        pageData.loading = true
        let { code, data, message } = await post({
            url: 'wms/shelve/getShelveByPara ',
            data: { warehouseId: form.value.warehouseId },
        })
        if (code == 200) {
            pageData.inShelveList1 = data
            pageData.loading = false
            return
        }
        ElMessage.error(message)
    } finally {
        pageData.loading = false
    }
}
const focusShelve3 = async () => {
    try {
        pageData.loading = true
        let { code, data, message } = await post({
            url: 'wms/shelve/getShelveByPara ',
            data: { warehouseId: form.value.warehouseId },
        })
        if (code == 200) {
            pageData.inShelveList3 = data
            pageData.loading = false
            return
        }
        ElMessage.error(message)
    } finally {
        pageData.loading = false
    }
}
//获取数据
const getList = async () => {
    console.log(activeNme.value)
    if (activeNme.value == '1') {
        query.stockInTypeId = 22
        query.stockOutTypeId = ''
        query.stockInType = '染厂退料入库'
        query.auditState = 0
        refgridOption.value.setQuery(query)
    }
    if (activeNme.value == '2') {
        query.stockInType = '染厂退料入库'
        query.stockOutTypeId = 22
        query.auditState = ''
        query.stockInTypeId = ''
        refgridOption1.value.setQuery(query)
    }
    if (activeNme.value == '3') {
        query.stockInType = '染厂退料入库'
        query.stockOutTypeId = 22
        query.auditState = 1
        query.stockInTypeId = ''
        refgridOption2.value.setQuery(query)
    }
}

//初始化
onMounted(() => {
    // getList()
})
</script>
<script lang="ts">
export default defineComponent({
    name: 'BlankStockReturnDemo',
})
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
  
